<!-- 基础雷达 -->
<template>
  <div :id="props.id" class="wh100"></div>
</template>

<script setup lang="ts" name="HzEchartsScatterCluster">
import * as echarts from 'echarts';
import {onMounted} from "vue";
import {getEchartsTextColor, getEchartsTheme} from "/@utils/GlobalFunction";
import {EchartsData} from "/@bean/GlobalEntity";
import {loadEchartsData} from "/@api/hz-bigscreen-api";
import ecStat from 'echarts-stat';

// eslint-disable-next-line no-undef
const props = defineProps({
  id: {
    type: String,
    default: 'scatter-cluster'
  },
  showTitle: {
    type: Boolean,
    default: true
  },
  showLegend: {
    type: Boolean,
    default: true
  },
  showTooltip: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: '数据聚合散点图'
  },
  data: {
    type: Object,
    default: () => {
      return [
        [3.275154, 2.957587],
        [-3.344465, 2.603513],
        [0.355083, -3.376585],
        [1.852435, 3.547351],
        [-2.078973, 2.552013],
        [-0.993756, -0.884433],
        [2.682252, 4.007573],
        [-3.087776, 2.878713],
        [-1.565978, -1.256985],
        [2.441611, 0.444826],
        [-0.659487, 3.111284],
        [-0.459601, -2.618005],
        [2.17768, 2.387793],
        [-2.920969, 2.917485],
        [-0.028814, -4.168078],
        [3.625746, 2.119041],
        [-3.912363, 1.325108],
        [-0.551694, -2.814223],
        [2.855808, 3.483301],
        [-3.594448, 2.856651],
        [0.421993, -2.372646],
        [1.650821, 3.407572],
        [-2.082902, 3.384412],
        [-0.718809, -2.492514],
        [4.513623, 3.841029],
        [-4.822011, 4.607049],
        [-0.656297, -1.449872],
        [1.919901, 4.439368],
        [-3.287749, 3.918836],
        [-1.576936, -2.977622],
        [3.598143, 1.97597],
        [-3.977329, 4.900932],
        [-1.79108, -2.184517],
        [3.914654, 3.559303],
        [-1.910108, 4.166946],
        [-1.226597, -3.317889],
        [1.148946, 3.345138],
        [-2.113864, 3.548172],
        [0.845762, -3.589788],
        [2.629062, 3.535831],
        [-1.640717, 2.990517],
        [-1.881012, -2.485405],
        [4.606999, 3.510312],
        [-4.366462, 4.023316],
        [0.765015, -3.00127],
        [3.121904, 2.173988],
        [-4.025139, 4.65231],
        [-0.559558, -3.840539],
        [4.376754, 4.863579],
        [-1.874308, 4.032237],
        [-0.089337, -3.026809],
        [3.997787, 2.518662],
        [-3.082978, 2.884822],
        [0.845235, -3.454465],
        [1.327224, 3.358778],
        [-2.889949, 3.596178],
        [-0.966018, -2.839827],
        [2.960769, 3.079555],
        [-3.275518, 1.577068],
        [0.639276, -3.41284]
      ]
    }
  },
  apiPath: { // api路径
    type: String,
    default: ''
  },
  chartsType: { // 图表类型
    type: String,
    default: 'scatterCluster'
  },
  methodType: {
    type: String, // 请求方式
    default: 'get'
  }
});
const CLUSTER_COUNT = 6;
var DIENSIION_CLUSTER_INDEX = 2;
const COLOR_ALL = [
  '#37A2DA',
  '#e06343',
  '#37a354',
  '#b55dba',
  '#b5bd48',
  '#8378EA',
  '#96BFFF'
];
const pieces = [];
for (let i = 0; i < CLUSTER_COUNT; i++) {
  pieces.push({
    value: i,
    label: 'cluster ' + i,
    color: COLOR_ALL[i]
  });
}

const option : any  = {
  dataset: [
    {
      source: props.data
    },
    {
      transform: {
        type: 'ecStat:clustering',
        // print: true,
        config: {
          clusterCount: CLUSTER_COUNT,
          outputType: 'single',
          outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX
        }
      }
    }
  ],
  title: {
    text: props.title,
    left: 'center',
    show: props.showTitle,
    textStyle: {
      color: getEchartsTextColor()
    },
  },
  legend: {
    show: props.showLegend,
    bottom: 5,
    textStyle: {
      color: getEchartsTextColor()
    },
  },
  tooltip: {
    position: 'top',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
        color: getEchartsTextColor()
      }
    },
    show: props.showTooltip
  },
  visualMap: {
      type: 'piecewise',
      top: 'middle',
      min: 0,
      max: CLUSTER_COUNT,
      left: 10,
      splitNumber: CLUSTER_COUNT,
      dimension: DIENSIION_CLUSTER_INDEX,
      pieces: pieces,
      textStyle: {
        color: getEchartsTextColor()
      },
    inRange: {
      color: '#555'
    },
    },
  grid: {
      left: 120
  },
  xAxis: {
    axisLine: {
      lineStyle: {
        type: 'dashed',
        color: getEchartsTextColor()
      }
    }
  },
  yAxis: {
    axisLine: {
      lineStyle: {
        type: 'dashed',
        color: getEchartsTextColor()
      }
    }
  },
  series: {
    type: 'scatter',
    encode: { tooltip: [0, 1] },
    symbolSize: 15,
    itemStyle: {
      borderColor: '#555'
    },
    datasetIndex: 1
  }
};
// 画布的宽高
const canvas = ref({
  width: 1920,
  height: 963
})

const scale = ref(1)


onMounted(() => {
  init()
});

const basicBar = ref();

function init() {
  scale.value = Math.min(window.innerWidth/canvas.value.width, window.innerHeight/canvas.value.height)
  //@ts-ignore
  document.body.style.zoom = scale.toString()
  basicBar.value = markRaw(echarts.init(document.getElementById(props.id), getEchartsTheme));
  //@ts-ignore
  echarts.registerTransform(ecStat.transform.clustering);
  basicBar.value.setOption(option);
  window.addEventListener('resize', () => {
    basicBar.value.resize();
  });
}

//@ts-ignore
watch(getEchartsTheme, () => {
  resetOption()
  init()
});
// 解决全局缩放导致的echarts canvas鼠标位置不准确的问题
const updateZoom = () => {
  const zoomValue = 1 / scale.value;
  const chartContainer = document.getElementById(props.id);
  if (chartContainer) {
    chartContainer.style.zoom = zoomValue.toString();
  }
};
function resetOption() {
  option.title.textStyle.color = getEchartsTextColor()
  option.legend.textStyle.color = getEchartsTextColor()
  option.series.label.color = getEchartsTextColor()
}

// 刷新图表方式，该方法需要提供给外部调用
// eslint-disable-next-line no-unused-vars
const refreshCharts = (data : any) => {
  option.title.text = data.title;
  option.dataset[0].source = data.data as any[]
  init()
};

// 刷新图表  根据apiPath，method，type query获取数据
const refreshChartsByApi = async (query : any) => {
  // 如果query中没有封装type则给query添加type属性
  if (!query.hasOwnProperty('chart_type')) {
    query.chart_type = props.chartsType
  }
  const s = await loadEchartsData(props.apiPath, props.methodType, query)
  refreshCharts(s.data)
}
// 监听 scale 的变化
watch(scale, () => {
  updateZoom();
});
// 重置图表大小
const resizeEcharts = () => {
  basicBar.value.resize();
}

// eslint-disable-next-line no-undef
defineExpose({
  refreshCharts,
  resizeEcharts,
  refreshChartsByApi
});
</script>

<style scoped>

</style>